<template>
  <div class="relicBatchImport">
    <div class="title">
      <span>文物管理 | 批量导入</span>
    </div>
    <div class="content">
      <h3>批量导入文物</h3>
      <div class="list">
        <el-upload
          class="upload-demo"
          drag
          :auto-upload="false"
          accept=".csv"
          action="#"
          :on-change="handleFileChange"
          :show-file-list="true"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" v-if="file==null"  class="el-upload__tip">
            <strong style="color: #215c3d;">文件要求：</strong>
            <ul>
              <li>UTF-8 编码，首行为表头（rid,name,groupType,localType,decadeType,image）</li>
              <li>年代必须为文字（例如：清康熙）图片路径以 /images//images/开头</li>
              <li>文件后缀名必须是<strong>.csv</strong></li>
            </ul>
          </div>
        </el-upload>
      </div>
        <!-- 导入结果展示 -->
        <div v-if="result">
        <el-alert :type="result.success ? 'success' : 'error'"
        @close="closeAlert">
          {{ result.message }}
          <div v-if="result.errors">
            失败记录：
            <ul>
              <li v-for="(error, index) in result.errors" :key="index">
                第 {{ error.row }} 行错误：{{ error.reason }}
              </li>
            </ul>
          </div>
        </el-alert>
      </div>
      <button
        type="success"
        @click="submitUpload"
        :disabled="!file"
        class="import"
      >
        开始导入
      </button>
    </div>
  </div>
</template>
  
  <script>
import { importRelicData } from "@/api/admin";
import { mapState, mapMutations } from "vuex";
import { Message } from "element-ui";
export default {
  name: "relicBatchImport",
  data() {
    return {
      file: null,
      result: null,
    };
  },
  methods: {
    ...mapMutations("app", ["setLoading"]),
    closeAlert(){
      window.location.reload()
    },
    // 文件选择回调
    handleFileChange(file) {
      if (file.raw.type !== "text/csv" && file.raw.type !=='application/vnd.ms-excel') {
        Message.error("仅支持 CSV 格式文件");
        return false;
      }
  
      this.file = file.raw;
      console.log(this.file)
    },
    async submitUpload() {
      if (!this.file) {
        Message.info("请先选择文件");
      }
      else{
      const formData = new FormData();
      formData.append("file", this.file);
      try {
        await importRelicData(formData).then((res) => {
          this.result = res.data.data.result;
          if (this.result.success) {
            Message.success("导入成功");
          }
          else  Message.error("导入失败");
        });
      } catch (error) {
        this.result = {
          success: false,
          message: "导入失败: " + error.response?.data?.message || "服务器错误",
        };
      }
    }
  }
  },
};
</script>
  
  <style scoped>
.relicBatchImport {
  min-height: 100vh;
}
.title {
  display: flex;
  height: 50px;
  line-height: 50px;
  color: #666666;
  margin-bottom: 20px;
  font-size: 18px;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 500px;
  height: 600px;
  margin: 0px auto;
  background: rgba(232, 231, 231, 0.6);
  box-shadow: 10px 10px 25px #666666;
  border-radius: 10px;
}
h3 {
  line-height: 50px;
  text-align: center;
  color: #666666;
  height: 50px;
  margin: -20px auto 30px;
}
.list {
  height: 300px;
  margin: 0px auto;
  padding: 0px 150px;
  width: 500px;
}
.import {
  background: rgba(42, 81, 77, 1);
  color: #fff;
  width: 300px;
  height: 35px;
  border-radius: 4px;
  margin: 30px auto 0px;
  border: 1px solid #215c3d;
  transition: all 0.3s;
}
.import:hover {
  cursor: pointer;
  box-shadow: 15px 5px 25px #929493;
}
</style>
  